import React, { useState } from 'react';
import { Modal, Button, Input, Select, message } from 'antd';
import styles from "./login.module.less"
import logo from "../../assets/images/avatar.jpg"
import Register from '../register/register';
import { reqLogin, reqVercode} from "../../api"

const { Option } = Select;

const Login = (props) => {
    const { visible, onCancel } = props
    const [isregister, setRegister] = useState(false)
    const [accountRegistration, setAccountRegistration] = useState(false)
    const [password, setPassword] = useState("")
    const [id, setId] = useState("")
    // 定义验证码变量
    let verify
   
    //点击登录
    const clickLogin = async(id, password) => {
        // debugger
        // 如果是验证码登录对比验证码

        // if (verify&&(verify != password)){
        //     message.error("验证码错误")
        //     return 
        // }
        //登录
        // const result = await reqLogin(id, password)
        // localStorage.setItem("token", result.data.data)
        // localStorage.setItem("authorId", id)

        localStorage.setItem("token", true)
        onCancel()
    }
    // 切换登录模式  （密码登录、验证码登录)
    const selectVerificationCode = () => {
        setAccountRegistration(false)
        setRegister(false)
    }

    //注册
    const register = (props) => {
        setRegister(true)
    }

    // 获取登录验证码
    const verifyCodeLogin = async(id)=>{

        //获取验证码
        // verify = await reqVercode(id, "注册账号")
        verify = 123
        return verify
        
    }
    return (
        <Modal
            centered
            visible={visible}
            onCancel={onCancel}
            footer={null}
            className={styles["model"]}
            maskClosable={false}
            closable={false}
        >
            {
                isregister ? 
                
                    <Register 
                        onClick={selectVerificationCode}    //切换登录模式
                        registration={accountRegistration}  // 判断是否是注册
                        clickLogin={clickLogin} 
                        onCancel={onCancel}
                        verifyCodeLogin={verifyCodeLogin}
                    /> :

                    (<div className={styles["contents"]}>
                        <div className={styles.logo} ><img src={logo} alt="" /></div>
                        <div className={styles["login"]}>
                            <div className={styles["login-phone"]}>
                                <Input.Group compact>
                                    <Select style={{ width: '30%' }} bordered={false} defaultValue="+86">
                                        <Option value="+86">+86</Option>
                                        <Option value="中国香港">中国香港</Option>
                                    </Select>
                                    <Input style={{ width: '70%' }} placeholder="输入邮箱" value={id} onChange={(e) => setId(e.target.value)} />
                                </Input.Group>
                            </div>
                            <div className={styles["login-password"]}>
                                <Input type="text" placeholder="验证码" value={password} onChange={(e) => setPassword(e.target.value)} />
                                <Button type="link" onClick={verifyCodeLogin} >获取验证码</Button>
                            </div>
                            <div className={styles["login-btn"]}>
                                <Button type="primary" shape="round" block onClick={()=>clickLogin(id, password)}>登录/注册</Button>
                            </div>

                            <div className={styles["login-select"]}>
                                <div><Button type="link" onClick={register}>账号密码登录</Button></div>
                                <div className={styles["register"]}><Button type="link" onClick={() => {
                                    setAccountRegistration(true)
                                    register(accountRegistration)
                                }}>注册</Button></div>
                            </div>
                            <div className={styles["admin-login"]}>
                                <Button type="primary" shape="round" block onClick={clickLogin}>管理员登录</Button>
                            </div>
                            <div className={styles["login-footer"]}>登录注册即代表同意协议</div>
                        </div>
                    </div>)
            }
        </Modal>
    )
}
export default Login
